<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      ref="searchForm"
      :model="searchModel"
      label-width="55px"
      :inline="true"
      size="mini"
    >

      <el-form-item>
        <el-input v-model="searchModel.code" placeholder="夹治具编码" />
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchModel.name" placeholder="夹治具名称" />
      </el-form-item>
      
      <el-form-item>
        <el-select v-model="searchModel.categoryId" placeholder="夹治具类别" style="width: 180px">
          <el-option
            style="font-size: 16px"
            v-for="item in typeOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="searchModel.tongsStatus" placeholder="夹治具状态" style="width: 180px" size="mini">
          <el-option
            style="font-size: 16px"
            v-for="item in statusOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="mini"
          icon="el-icon-search"
          type="primary"
          @click="search(pageNo, pageSize)"
        >查询</el-button>
        <el-button icon="el-icon-delete" @click="resetValue()" size="mini">重置</el-button>
      </el-form-item>
    
      <div style="margin: 0px 0px 5px 0px">
          <el-button
            style="font-size: 10px"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="openAddWindow()"
          >新增</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-circle-check"
            size="mini"
            type="success"
            @click="handleAudit()"
          >审核</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-circle-close"
            size="mini"
            type="warning"
            @click="onAudit()"
          >反审</el-button>
          <!-- 批量删除 -->
          <el-button style="font-size: 10px" @click="handleDelete()" size="mini" icon="el-icon-delete" type="danger">删除</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-download"
            size="mini"
            type="primary"
            plain
            @click="dowonloadExcel()"
          >导出</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-upload2"
            size="mini"
            type="success"
            plain
            @click="importExcel()"
          >导入</el-button>
      </div>
    </el-form>

    <el-table
      ref="multipleTable" 
      class="tableBox"
      style="width: 100%; font-size: 15px"
      :data="objList"
      :height="tableHeight"
      border
      stripe
      @selection-change="handleSelectionChange"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}">
      <el-table-column width="80"
        type="selection">
      </el-table-column>

      <el-table-column prop="index" label="序号" align="center" width="80" fixed>
        <template slot-scope="scope">
            <span>{{ scope.$index + (pageNo - 1) * pageSize + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="code"
        label="夹治具编码">
      </el-table-column>

      <el-table-column

        prop="name"
        label="夹治具名称">
      </el-table-column>

      <el-table-column
        prop="projectName"
        label="项目名称"
        >
      </el-table-column>

      <el-table-column
        prop="productName"
        label="产品名称">
      </el-table-column>

      <el-table-column
        prop="tongsStatus"
        label="夹治具状态">
        <template slot-scope="scope"  >
          <el-tag v-if="scope.row.tongsStatus === 2" type="success" size="mini" style="font-size: 6px">正常</el-tag>
          <el-tag v-else-if="scope.row.tongsStatus === 1" type="danger" size="mini" style="font-size: 6px">暂停</el-tag>
          <el-tag v-else type="danger" size="mini" style="font-size: 6px">终止</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="createBy"
        label="创建人">
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>

      <el-table-column
        prop="approveBy"
        label="审核人">
      </el-table-column>

      <el-table-column
        prop="approveTime"
        label="审核日期">
      </el-table-column>
      
      <el-table-column
        label="操作"
        width="335"
        >
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)"  size="mini" type="primary" icon="el-icon-edit-outline" style="font-size: 10px">编辑</el-button>
          <el-button @click="del(scope.row.id)" icon="el-icon-delete" type="warning" size="mini" style="font-size: 10px">删除</el-button>
          <el-button @click="handleINFO(scope.row)" type="success" icon="el-icon-view" size="mini" plain style="font-size: 10px">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <!-- 分页工具栏 -->
      <el-pagination
        small
        background
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加和修改窗口 -->
    <system-dialog
      :title="addDialog.title"
      :visible="addDialog.visible"
      :width="addDialog.width"
      :height="addDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
    
        <el-form
          ref="proveiderForm"
          :model="uObj"
          :rules="rules"
          label-width="120px"
          :inline="true"
          size="mini"
        >
          <p>基本信息</p>
          <el-form-item label="夹治具编码"  prop="code">
            <span  slot="label">
              <span class="formLabel"><strong>夹治具编码</strong></span>
            </span>
            <el-input v-model="uObj.code" class="f-item"/>
          </el-form-item>

          <el-form-item  prop="name">
            <span  slot="label" >
              <span class="formLabel"><strong>夹治具名称</strong></span>
            </span>
            <el-input v-model="uObj.name" class="f-item"/>
          </el-form-item>
        
          <el-form-item prop="type"  label="">
            <span  slot="label">
              <span class="formLabel"><strong>夹治具类别</strong></span>
            </span>
              <el-select v-model="uObj.categoryId" placeholder="请选择" style="width: 220px">
                <el-option
                  style="font-size: 16px"
                  v-for="item in typeOpts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item prop="type" label="项 目">
            <span  slot="label">
              <span class="formLabel"><strong>项 目</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px"
              class="f-item"
              v-model="uObj.projectName"
              :readonly="true"
              @click.native="selectPro"
            />
          </el-form-item>

          <el-form-item prop="type" label="产 品">
            <span  slot="label">
              <span class="formLabel"><strong>产 品</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px"
              class="f-item"
              v-model="uObj.productName"
              :readonly="true"
              @click.native="selectPdt"
            />
          </el-form-item>

          <el-form-item prop="manager"  label="">
            <span  slot="label">
              <span class="formLabel"><strong>负责人</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px"
              class="f-item"
              v-model="uObj.employeeName"
              :readonly="true"
              @click.native="selectEmp"
            />
          </el-form-item>

          <el-form-item prop="type" label="">
            <span  slot="label">
              <span class="formLabel"><strong>开始日期</strong></span>
            </span>
            <el-date-picker
              style="width: 220px"
              v-model="uObj.startTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="type" label="">
            <span  slot="label">
              <span class="formLabel"><strong>结束日期</strong></span>
            </span>
            <el-date-picker
              style="width: 220px"
              v-model="uObj.endTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label=""  prop="">
            <span  slot="label">
              <span class="formLabel"><strong>预警天数</strong></span>
            </span>
            <el-input 
              placeholder="预警天数"
              suffix-icon="el-icon-time"
              style="width: 220px"
              v-model="uObj.daysOfWarning" class="f-item"/>
          </el-form-item>

          <el-form-item>
            <span  slot="label">
              <span class="formLabel"><strong>夹治具状态</strong></span>
            </span>
            <el-select v-model="uObj.tongsStatus" placeholder="夹治具状态" style="width: 220px" size="mini">
              <el-option
                style="font-size: 16px"
                v-for="item in statusOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="status"  label="">
            <span  slot="label">
              <span class="formLabel"><strong>状态</strong></span> 
            </span>
            <el-checkbox v-model="checked" disabled></el-checkbox>
            <span>
              <span class="formLabel"><strong> 审核</strong></span> 
            </span>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <span  slot="label">
              <span class="formLabel"><strong>备注</strong></span>
            </span>
            <el-input style="width: 930px" v-model="uObj.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>

    <!-- 信息 -->
    <system-info-dialog
      :title="infoDialog.title"
      :visible="infoDialog.visible"
      :width="infoDialog.width"
      :height="infoDialog.height"
      @onClose="onClose"
    >
      <div slot="content">
    
        <el-form
          ref="proveiderForm"
          :model="uObj"
          :rules="rules"
          label-width="130px"
          :inline="true"
          size="mini"
          class="demo-form-inline"
        >
          <p>基本信息</p>
          <el-form-item label="公司名称"  prop="code">
            <span  slot="label">
              <span class="formLabel"><strong>夹治具编码</strong></span>
            </span>
            <el-input v-model="uObj.code" class="f-item"/>
          </el-form-item>

          <el-form-item  prop="name">
            <span  slot="label" >
              <span class="formLabel"><strong>夹治具名称</strong></span>
            </span>
            <el-input v-model="uObj.name" class="f-item"/>
          </el-form-item>
        
          <el-form-item prop="type"  label="">
            <span  slot="label">
              <span class="formLabel"><strong>夹治具类别</strong></span>
            </span>
              <el-select v-model="uObj.categoryId" placeholder="请选择" style="width: 220px">
                <el-option
                  style="font-size: 16px"
                  v-for="item in typeOpts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item prop="type" label="项 目">
            <span  slot="label">
              <span class="formLabel"><strong>项 目</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px" class="f-item"
              v-model="uObj.projectName"
              :readonly="true"
              @click.native="selectPro"
            />
          </el-form-item>

          <el-form-item prop="type" label="产 品">
            <span  slot="label">
              <span class="formLabel"><strong>产 品</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px" 
              class="f-item"
              v-model="uObj.productName"
              :readonly="true"
              @click.native="selectPro"
            />
          </el-form-item>

          <el-form-item prop="manager"  label="">
            <span  slot="label">
              <span class="formLabel"><strong>负责人</strong></span>
            </span>
            <el-input
              placeholder="请点击选择"
              suffix-icon="el-icon-search"
              style="width: 220px" 
              v-model="uObj.employeeName" class="f-item"/>
          </el-form-item>


          <el-form-item prop="type" label="">
            <span  slot="label">
              <span class="formLabel"><strong>开始日期</strong></span>
            </span>
            <el-date-picker
              style="width: 220px"
              v-model="uObj.startTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="type" label="">
            <span  slot="label">
              <span class="formLabel"><strong>结束日期</strong></span>
            </span>
            <el-date-picker
              style="width: 220px"
              v-model="uObj.endTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label=""  prop="">
            <span  slot="label">
              <span class="formLabel"><strong>预警天数</strong></span>
            </span>
            <el-input 
              placeholder="预警天数"
              suffix-icon="el-icon-time"
              style="width: 220px"
              v-model="uObj.daysOfWarning" class="f-item"/>
          </el-form-item>

          <el-form-item>
            <span  slot="label">
              <span class="formLabel"><strong>夹治具状态</strong></span>
            </span>
            <el-select v-model="uObj.tongsStatus" placeholder="夹治具状态" style="width: 220px" size="mini">
              <el-option
                style="font-size: 16px"
                v-for="item in statusOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

            <el-form-item prop="status"  label="">
              <span  slot="label">
                <span class="formLabel"><strong>状态</strong></span> 
              </span>
              <el-checkbox v-model="checked" disabled></el-checkbox>
              <span>
                <span class="formLabel"><strong> 审核</strong></span> 
              </span>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <span  slot="label">
                <span class="formLabel"><strong>备注</strong></span>
              </span>
              <el-input style="width: 930px" v-model="uObj.remark" type="textarea" :rows="3" />
            </el-form-item>
            <p>系统信息</p>
            <el-form-item  prop="contactNumber">
              <span  slot="label">
                <span class="formLabel"><strong>创建人</strong></span>
              </span>
              <el-input v-model="uObj.createBy" />
            </el-form-item>
            <el-form-item label="创建日期"  prop="wechat">
              <span  slot="label">
                <span class="formLabel"><strong>创建日期</strong></span>
              </span>
              <el-input v-model="uObj.createTime" />
            </el-form-item>
            <br>
            <el-form-item prop="mailbox"  label="审核人">
              <span  slot="label">
                <span class="formLabel"><strong>审核人</strong></span>
              </span>
              <el-input v-model="uObj.approveBy" />
            </el-form-item>

            <el-form-item prop="customerManager"  label="审核日期">
              <span  slot="label">
                <span class="formLabel"><strong>审核日期</strong></span>
              </span>
              <el-input v-model="uObj.approveTime" />
            </el-form-item>
        </el-form>
      </div>
    </system-info-dialog>
    
    <!-- 导入弹框 -->
    <upload-excel-dialog
      :title="uploadDialog.title"
      :visible="uploadDialog.visible"
      :width="uploadDialog.width"
      :height="uploadDialog.height"
      @onClose="onClose"
    >
      <div slot="content">
        <el-form label-width="90px">
          <el-form-item label="信息描述" >
            <span  slot="label">
              <span class="formLabel"><strong>模板</strong></span>
            </span>
            <el-tag>
              <i class="el-icon-download"/>
              <a
                :href="'/static/data1.xlsx'">下载模版</a>
            </el-tag>
          </el-form-item>

          <el-form-item label="">
            <span  slot="label">
              <span class="formLabel"><strong>选择文件</strong></span>
            </span>
            <el-upload
              ref="upload"
              :before-upload="beforeUpload"
              :on-change="uploadChange"
              :auto-upload="false"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :on-exceed="handleExceed"
              :limit="1"
              :file-list="fileList"
              :headers="TOKEN"
              :action="BASE_API+'api/warehouse/import'"
              false
              手动上传
              name="file"
              accept="application/vnd.ms-excel,.xls,.xlsx">
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <el-button
                  :loading="loading"
                  style="margin-left: 10px;"
                  size="mini"
                  type="success"
                  @click="submitUpload">{{ fileUploadBtnText }}
                </el-button>
                <p slot="tip" class="el-upload__tip">支持文件格式 .xls .xlsx, 且不超过10mb</p>
              </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </upload-excel-dialog>

    <!-- 项目选择窗口 -->
    <select-dialog
      :title="proDialog.title"
      :width="proDialog.width"
      :height="proDialog.height"
      :visible="proDialog.visible"
      
      @onClose="onProClose"
    >
      <div slot="content">
        <div>
        <el-input
          style="width: 97%"
          size="mini"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="indexKey"
          >
        </el-input>
        </div>
        <div>
        <!-- 数据列表 -->
        <el-table :data="pjt" @cell-dblclick="handleProRow"
          :height="proTableHeight"
          class="tableBox"
          style="width: 97%; font-size: 15px"
          >
          <el-table-column property="code" label="编 号" ></el-table-column>
          <el-table-column property="name" label="名 称"></el-table-column>
        </el-table>
        </div>
      </div>
    </select-dialog>

    <!-- 产品选择窗口 -->
    <select-dialog
      :title="pdtDialog.title"
      :width="pdtDialog.width"
      :height="pdtDialog.height"
      :visible="pdtDialog.visible"
      
      @onClose="onPdtClose"
    >
      <div slot="content">
        <div>
        <el-input
          style="width: 97%"
          size="mini"
          v-model="indexKey"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          >
        </el-input>
     
        </div>
        <div>
        <!-- 数据列表 -->
        <el-table :data="pdt" @cell-dblclick="handlePdtRow"
          :height="proTableHeight"
          class="tableBox"
          style="width: 97%; font-size: 15px"
          >
          <el-table-column property="code" label="编 号" ></el-table-column>
          <el-table-column property="name" label="名 称"></el-table-column>
        </el-table>
        </div>
      </div>
    </select-dialog>    

    <!-- 负责人选择窗口 -->
    <select-dialog
      :title="empDialog.title"
      :width="empDialog.width"
      :height="empDialog.height"
      :visible="empDialog.visible"
      @onClose="onEmpClose"
    >
      <div slot="content">
        <div>
        <el-input
          style="width: 97%"
          size="mini"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="indexKey"
          >
        </el-input>

        </div>
        <div>
        <!-- 数据列表 -->
        <el-table :data="emp" @cell-dblclick="handleEmpRow"
          :height="proTableHeight"
          class="tableBox"
          style="width: 97%; font-size: 15px"
          >
          <el-table-column property="jobNum" label="工 号" ></el-table-column>
          <el-table-column property="realName" label="名 称"></el-table-column>
        </el-table>
        </div>
      </div>
    </select-dialog>
  </el-main>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

// 导入api
import tongsApi from '@/api/tongs/type';
import tongsInfoApi from '@/api/pm/projectTongsInfo';


import proApi from '@/api/pm/project-info';
import pdtApi from '@/api/pm/product-info';
import empApi from '@/api/organization/employee';

// 导入对话框组件
import selectDialog from '@/components/system/selectDialog.vue';
import SystemDialog from '@/components/system/SystemDialog.vue';
import SystemInfoDialog from '@/components/system/SystemInfoDialog.vue';
import UploadExcelDialog from '@/components/system/UploadExcelDialog';


export default {
    //注册组件
   components:{
      SystemDialog,
      SystemInfoDialog,
      UploadExcelDialog,
      selectDialog
   },
   data() {
      return {
        value1: '',

        // loading: true,
        multipleSelection: [],
        searchModel: {},
        objList: [],
        pjtList: [], // 项目列表
        pdtList: [], // 产品列表
        empList: [], // 员工列表

        // pjt: {
        //   id: '',
        //   code: '',
        //   name: ''
        // },

        // pdt: {},
        // emp: {},

        tableHeight: 0, // 表格高度
        proTableHeight: 0, // 表格高度 
        pageNo: 1, // 当前页码
        pageSize: 10, // 每页显示数量
        total: 0, // 总数量
        checked: false,

        // 查询条件对象
        searchModel: {
          code: '',
          name: '',
          categoryId: '',
          tongsStatus: '',
          pageNo: 1,
          pageSize: 10
        },

        uObj: {
          id: '',
          code: '',
          name: '',
          categoryId: '',
          categoryName: '',
          projectId: '',
          projectName: '',

          productId: '',
          productName: '',

          employeeId: '',
          employeeName: '',

          startTime: '',
          endTime: '',

          daysOfWarning: '',
          tongsStatus: '',

          status: '',
          remark: '',

  
          createBy: '',
          createTime: '',

          updateBy: '',
          updateTime: '',          

          approveBy: '',
          approveTime: '',     
        },
        // 添加和修改客户资料窗口属性
        addDialog: {
          title: '',
          visible: false,
          height: 450,
          width: 1200
        },
        infoDialog: {
          title: '',
          visible: false,
          height: 670,
          width: 1200
        },
        uploadDialog: {
          title: '',
          visible: false,
          height: 300,
          width: 600
        },
        // 上级菜单弹框属性
        proDialog: {
          title: '选择项目',
          width: 750,
          height: 450,
          visible: false
        },
        // 上级菜单弹框属性
        pdtDialog: {
          title: '选择项目',
          width: 750,
          height: 450,
          visible: false
        },
        // 上级菜单弹框属性
        empDialog: {
          title: '选择项目',
          width: 750,
          height: 450,
          visible: false
        },
        // 弹框
        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入夹治具类型名称' }],
          // companyName: [{ required: true, trigger: 'blur', message: '请输入公司名称' }]
        },

        typeOpts: [],

        statusOpts: [{
          value: 0,
          label: '终止'
        }, {
          value: 1,
          label: '暂停'
        }, {
          value: 2,
          label: '正常'
        }],

        auditObj: {
          ids: []
        },
        // // 上传文件
        // limitNum: 1,  // 上传excell时，同时允许上传的最大数
        BASE_API: process.env.VUE_APP_BASE_API,
        TOKEN: {"token": getToken()},
        // //上传后的文件列表
        fileList: [],
        fileUploadBtnText: '导 入', // 按钮文字
        importBtnDisabled: false, // 按钮是否禁用,
        loading: false,
        fileListLen: 0,
        indexKey: '',
      }
    },
    created(){
      this.search()
      this.getAllTongsType()
    },
    watch: {

    },
    // 挂载后调用
    mounted() {
      window.addEventListener('resize', this.handleResize);
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 335
        this.proTableHeight = window.innerHeight - 558
      })
    },
    destroyed() {
     window.removeEventListener("resize", this.handleResize);
    },
    methods: {

      // ======================文件导入==============================
      // 文件状态改变时的函数
      uploadChange(file, fileList) {
          this.file = file.raw
          // 问题一方案：验证文件数量，替换后仅保留第一个文件
          if (fileList.length > 1) {
            fileList.splice(0, 1)
          }
          this.fileListLen = fileList.length
        },

      handleExceed(files, fileList) {
        this.$message.warning(`只能选择 1 个文件，当前共选择了 ${files.length + fileList.length} 个`);
      },

      // 提取文件后缀名
      getSuffix(str) {
        const fileExtension = str.substring(str.lastIndexOf(".") + 1);
        return fileExtension;
      },

      //导入前判断
      beforeUpload(file,fileList) {
        let suffix = this.getSuffix(file.name);
        if (suffix !== "xlsx") {
          this.$message.error("文件格式只能是.xlsx");
          return false;
        }
      },

      submitUpload() {
        if (this.fileListLen === 0) {
           this.$message.warning("选择文件");
        }else {
          this.fileUploadBtnText = '正在导入...'
          this.importBtnDisabled = true
          this.loading = true
          // 使用vue中的表单提交
          this.$refs.upload.submit()
          this.fileListLen = 0
        }

      },

      // 上传成功
      fileUploadSuccess(response) {
        // 提示信息
        this.loading = false
        this.$message({
          type: 'success',
          message: '导入成功！'
        })
        this.importBtnDisabled = false
        // 跳转到课程分类列表，使用路由跳转
        this.uploadDialog.visible = false   
        this.search()
        this.fileUploadBtnText = '导 入'
        this.fileListLen = 0
      },

      // 上传失败
      fileUploadError() {
        // 提示信息
        this.loading = false
        this.$message({
          type: 'error',
          message: '导入失败！'
        })
        this.importBtnDisabled = false
        this.fileListLen = 0
      },
      // ===========================================================
      // 获取所有的夹治具类型
      async getAllTongsType() {
          const resp = await tongsApi.allType()
          this.typeOpts = resp.data
      },
      // 获取复选框中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 审核
      async handleAudit() {

        this.auditObj.ids = this.multipleSelection.map(item => {
          return item.id;
        })
        if (this.auditObj.ids.length > 0) {
          const res = await tongsInfoApi.audit(this.auditObj)
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }else {
          this.$message.error("请勾选需要审核的数据！")
        }
      },

      // 反审核
      async onAudit() {
        this.auditObj.ids = this.multipleSelection.map(item => {
          return item.id;
        })
        if (this.auditObj.ids.length > 0) {
          const res = await tongsInfoApi.disAudit(this.auditObj)
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }
      },

      // 导入excel
      importExcel() {
        if (1===1) {
          this.$message.warning("开发中...")
          return ;
        }
        this.fileListLen = 0
        this.fileList = [],
        this.uploadDialog.title = '导入数据'// 设置窗口标题
        this.uploadDialog.visible = true // 显示窗口
      },

      dowonloadExcel() {
        if (1===1) {
          this.$message.warning("开发中...")
          return ;
        }
        axios({
          method: "get",
          url: this.BASE_API+"api/warehouse/export",
          responseType: 'blob',
          headers: {
            "token": getToken()
          }
        })
        .then(resp => {
          if (!resp) {
              this.$message.warning("导出数据失败！")
              return
          }
          const link = document.createElement('a');
          let blob = new Blob([resp.data], {type: 'application/vnd.ms-excel'});
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);

          link.setAttribute('download', '夹治具资料列表' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      },

      // 批量删除 TODO
      async handleDelete() {
        this.auditObj.ids = this.multipleSelection.map(item => {
            return item.id;
        })
        if (this.auditObj.ids.length > 0) {
          const confirm = await this.$myconfirm('确定要删除该数据吗?')
          if (confirm) { 
            const res = await tongsInfoApi.del(this.auditObj)
            // 判断是否成功
            if (res.success) {
              // 成功提示
              this.$message.success(res.message)
              // 刷新
              this.search()
            } else {
              // 失败提示
              this.$message.error(res.message)
            }
          }
        }else{
          this.$message.success("请选择要删除的数据！")
        }
      },

      async del(id) {
        this.auditObj.ids = []
        if (id != "" && id != null) {
          this.auditObj.ids  = [id];
        }
        if (this.auditObj.ids.length > 0) {
          const confirm = await this.$myconfirm('确定要删除该数据吗?')
          if (confirm) { 
            const res = await tongsInfoApi.del(this.auditObj)
            // 判断是否成功
            if (res.success) {
              // 成功提示
              this.$message.success(res.message)
              // 刷新
              this.search()
            } else {
              // 失败提示
              this.$message.error(res.message)
            }
          }
        }
      },

      // 查询列表
      async search(pageNo = 1, pageSize = 10) {
        this.searchModel.pageNo = pageNo
        this.searchModel.pageSize = pageSize
        // 发送查询请求
        const res = await tongsInfoApi.pageList(this.searchModel)
        if (res.success) {
          this.objList = res.data.records
          this.total = res.data.total - 0
        }
      },

      // 当每页数量发生变化时触发该事件
      handleSizeChange(size) {
        this.pageSize = size // 将每页显示的数量交给成员变量
        this.search(this.pageNo, size)
      },

      // 当页码发生变化时触发该事件
      handleCurrentChange(page) {
        this.pageNo = page
        // 调用查询方法
        this.search(page, this.pageSize)
      },

      // 打开添加窗口
      openAddWindow() {
        this.checked = false
        // 清空表单数据
        this.$resetForm('proveiderForm', this.uObj)
        this.addDialog.title = '新增夹治具类型'// 设置窗口标题
        this.addDialog.visible = true // 显示窗口
      },

      // 关闭窗口
      onClose() {
        this.addDialog.visible = false
        this.infoDialog.visible = false
        this.uploadDialog.visible = false
        // 打开表单后，清除校验信息
        this.$refs.proveiderForm.clearValidate();
      },

      // 窗口确认事件
      onConfirm() {
        // 表单验证
        this.$refs.proveiderForm.validate(async(valid) => {
          if (valid) {
            let res = null
            // this.uObj.status = this.checked ? 1 : 0;
            // 判断id是否为空
            if (this.uObj.id === '') {
              // 新增
              // 发送添加请求
              res = await tongsInfoApi.addObj(this.uObj)
            } else {
              // 发送修改请求
              res = await tongsInfoApi.updateObj(this.uObj)
            }
            // 判断是否成功
            if (res.success) {
              this.$message.success(res.message)
              // 刷新
              this.search(this.pageNo, this.pageSize)
              // 关闭窗口
              this.addDialog.visible = false
            } else {
              this.$message.error(res.message)
            }
          }
        })
      },

      // 打开编辑窗口
      handleEdit(row) {
        
        // 数据回显
        this.$objCopy(row, this.uObj) // 将当前编辑的数据复制到role对象中
        console.log(row.status)
        
        this.checked = this.uObj.status == 1 ? true : false;
        
        // 设置窗口标题
        this.addDialog.title = '编辑夹治具类型'
        // 显示编辑窗口
        this.addDialog.visible = true
      },

      // 详情 
      handleINFO(row) {
        // 数据回显
        this.$objCopy(row, this.uObj) // 将当前编辑的数据复制到role对象中
        this.checked = this.uObj.status == 1 ? true : false;
        // 设置窗口标题
        this.infoDialog.title = '夹治具类型信息'
        // 显示编辑窗口
        this.infoDialog.visible = true
      },

      // 重置查询条件
      resetValue() {
        // 清空查询条件
        this.searchModel.code = ''
        this.searchModel.name = ''
        this.searchModel.categoryId = ''
        this.searchModel.tongsStatus = ''
        // 重新查询
        this.search()
      },
      // ============= 选择项目 ================
      async selectPro() {
        // 显示窗口
        this.proDialog.visible = true
        // 发送查询请求
        const resp = await proApi.getAll()
        this.pjtList = resp.data
        // 判断是否成功
        // if (res.success) {
        //   // 赋值
        //   this.parentMenuList = res.data
        // }
      },

      // 选择所属菜单取消事件
      onProClose() {
        this.proDialog.visible = false // 关闭窗口
      },

      // 项目行表格点击事件
      handleProRow(row) {
        this.uObj.projectId = row.id
        this.uObj.projectName = row.name
        this.proDialog.visible = false // 关闭窗口
      },

      // =================================================

      // ============= 选择产品 ================
      async selectPdt() {
        // 显示窗口
        this.pdtDialog.visible = true
        // 发送查询请求
        const resp = await pdtApi.getAll()
        this.pdtList = resp.data
        // 判断是否成功
        // if (res.success) {
        //   // 赋值
        //   this.parentMenuList = res.data
        // }
      },

      // 选择所属菜单取消事件
      onPdtClose() {
        this.pdtDialog.visible = false // 关闭窗口
      },

      // 项目行表格点击事件
      handlePdtRow(row) {
        this.uObj.productId = row.id
        this.uObj.productName = row.name
        this.pdtDialog.visible = false // 关闭窗口
      },

      // =================================================
      
      // ============= 选择项目 ================
      async selectEmp() {
        // 显示窗口
        this.empDialog.visible = true
        // 发送查询请求
        const resp = await empApi.getAll()
        this.empList = resp.data
        // 判断是否成功
        // if (res.success) {
        //   // 赋值
        //   this.parentMenuList = res.data
        // }
      },

      // 选择所属菜单取消事件
      onEmpClose() {
        this.empDialog.visible = false // 关闭窗口
      },

      // 项目行表格点击事件
      handleEmpRow(row) {
        this.uObj.employeeId = row.id
        this.uObj.employeeName = row.realName
        this.empDialog.visible = false // 关闭窗口
      },

      // =================================================
    },
    computed:{
      pdt:function(){
        var search=this.indexKey;
        if(search){
          return  this.pdtList.filter(function(dataNews){
            console.log("@@ ",dataNews)
            return Object.keys(dataNews).some(function(key){
              if (key == "name" || key == "code") {
                if (dataNews[key].includes(search) || dataNews[key] == search) {
                    return true
                }
              }
            })
          })
        }
        return this.pdtList
      },

      pjt:function(){
        var search=this.indexKey;
        if(search){
          return  this.pjtList.filter(function(dataNews){
            return Object.keys(dataNews).some(function(key){
              if (key == "name" || key == "code") {
                if (dataNews[key].includes(search) || dataNews[key] == search) {
                    return true
                }
              }
            })
          })
        }
        return this.pjtList
      },

      emp:function(){
        var search=this.indexKey;
        if(search){
          return  this.empList.filter(function(dataNews){
            return Object.keys(dataNews).some(function(key){
              if (key == "jobNum" || key == "realName") {
                if (dataNews[key].includes(search) || dataNews[key] == search) {
                    return true
                }
              }
            })
          })
        }
        return this.empList
      }
    }
}
</script>

<style lang="scss">

/* 下拉滚动条 */
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}


.formLabel {
  font-size: 13px;
  color: #333333;
  font-family: "MicrosoftYaHeiLight", "微软雅黑 Light", "微软雅黑", sans-serif;
  font-weight: 200;
  // line-height: 30px;
}

.f-item>>>.el-input__inner {
   width: 151px;
}

// el-table 表格行高设置
.tableBox {

  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}

//表头
thead th:not(.is-hidden):last-child {
  right: -1px !important;
}
//表单
.el-table__row {
  td:not(.is-hidden):last-child {
    right: -1px !important;
  }
}

// el-table 表格行高设置
.tableBox {
  th {
    padding: 0 !important;
    height: 35px;
    line-height: 35px;
  }
  td {
    padding: 0 !important;
    height: 35px;
    line-height: 35px;
  }
}

// pagination 样式
// .el-pagination__sizes .el-input .el-input__inner {
//     font-size: 0.01;
//     padding-left: 0.041667rem;
// }

// .el-input--mini .el-input__inner {
//     height: 0.113rem;
//     line-height: 0.145833rem;
// }
</style>